<template>
  <div
    v-if="detailData"
    class="base-info-view"
  >
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
      style="padding-left:20px;"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item
          label="产品编号："
          style="width:50%"
        >
          <div>{{ detailData?.productNumber || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="通用名："
          style="width:50%"
        >
          <div>{{ detailData?.productPopularName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="产品别名："
          style="width:50%"
        >
          <div>{{ detailData?.productAlias || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="商品名："
          style="width:50%"
        >
          <div>{{ detailData?.productName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="批准文号："
          style="width:50%"
        >
          <div>{{ detailData?.approvalNumber || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="计价单位："
          style="width: 50%"
        >
          <div>{{ getLabel('sell_unit', detailData.sellUnit) || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="生产厂家："
          style="width:50%"
        >
          <div>{{ detailData?.producer || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="市场价："
          style="width: 50%"
        >
          <div>
            <span>{{ detailData.marketPrice }}元</span>
            <span v-if="detailData.sellUnit">/{{ getLabel('sell_unit', detailData.sellUnit) }}</span>
          </div>
        </el-form-item>
        <el-form-item
          label="医保价："
          style="width: 50%"
        >
          <div v-if="detailData.medicalInsurancePrice">
            <span>{{ detailData.medicalInsurancePrice }}元</span>
            <span v-if="detailData.sellUnit">/{{ getLabel('sell_unit', detailData.sellUnit) }}</span>
          </div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item
          label="剂型："
          style="width: 50%"
        >
          <div>{{ getLabel('drug_form', detailData.drugForm) || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="产品线："
          style="width: 50%"
        >
          <div>{{ detailData.productLineDetail?.productLineName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="包装规格："
          style="width: 50%"
        >
          <div>{{ detailData.packSpecs }}</div>
        </el-form-item>
        <el-form-item
          label="中包装："
          style="width: 50%"
        >
          <div v-if="detailData.mPackNum"><span>{{ detailData.mPackNum }}</span><span>{{ getLabel('sell_unit', detailData.sellUnit) }}</span><span v-if="detailData.mPackUnit"> / {{ getLabel('sell_unit', detailData.mPackUnit) }}</span></div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item
          label="大包装："
          style="width: 50%"
        >
          <div v-if="detailData.lPackNum"><span>{{ detailData.lPackNum }}</span><span>{{ getLabel('sell_unit', detailData.sellUnit) }}</span><span v-if="detailData.lPackUnit"> / {{ getLabel('sell_unit', detailData.lPackUnit) }}</span></div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item
          label="产品属性："
          style="width: 50%"
        >
          <div>{{ getLabel('product_attribute', detailData.productAttribute) }}</div>
        </el-form-item>
        <el-form-item
          label="创建人："
          style="width: 50%"
        >
          <div>{{ detailData.creatorName }}</div>
        </el-form-item>
        <el-form-item
          label="创建时间："
          style="width: 50%"
        >
          <div>{{ dateFormat("yyyy-mm-dd HH:MM", detailData.createdAt) }}</div>
        </el-form-item>
        <el-form-item
          label="其他描述："
          style="width: 50%"
        >
          <div>{{ detailData.remark || '无' }}</div>
        </el-form-item>
      </el-row>

      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item label="说明书：">
          <div
            v-if="detailData.instruction&&detailData.instruction.length"
            class="img-container"
          >
            <div
              v-for="(item, index) in detailData.instruction"
              :key="item"
              class="img-item"
            >
              <el-image
                :src="item.url"
                :preview-src-list="detailData.instruction.map(p=>p.url)"
                :initial-index="1"
              />
            </div>
          </div>
          <div v-else>无</div>
        </el-form-item>
      </el-row>
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item label="产品图片：">
          <div
            v-if="detailData.images&&detailData.images.length"
            class="img-container"
          >
            <div
              v-for="(item, index) in detailData.images"
              :key="item"
              class="img-item"
            >
              <el-image
                :src="item.url"
                :preview-src-list="detailData.images.map(p=>p.url)"
                :initial-index="1"
              />
            </div>
          </div>
          <div v-else>无</div>
        </el-form-item>
      </el-row>

    </el-form>

  </div>
</template>

<script>
import { inject, reactive, toRefs, watch } from 'vue'

export default {
  name: 'ProductBaseInfo',
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props, context) {
    const api = inject('api')
    var reactiveData = reactive({
      detailData: {},
    })
    // 获取产品详情
    const getProductDetail = (productId) => {
      api.product
        .PRODUCT_DETAIL({
          id: productId,
        })
        .then((res) => {
          if (res.code) {
            console.log(res.msg)
          } else {
            reactiveData.detailData = res.data.productInfo
          }
        })
    }
    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval !== 0) {
          getProductDetail(newval)
        }
      },
      { immediate: true }
    )
    return {
      ...toRefs(reactiveData),
    }
  },
}
</script>

<style lang="scss" scoped>
.img-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .img-item {
    width: 150px;
    height: 150px;
    padding: 5px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-image {
      width: 100%;
    }
  }
}
</style>
